import React, { Component } from 'react'
import { Icon, Divider, Popconfirm, Input, Tooltip, Dropdown, Menu } from 'antd';
import {setSessionData} from '@/utils/localData'

export default class TelNode extends Component {

    constructor(props) {
        super(props);
        this.state = {
            telGroupName:''
        }
    }

    addTelGroup = () =>{
        let name = this.state.telGroupName
        this.state.telGroupName = ''
        if(name!==''){
            const { dispatch, tnode } = this.props
            let level = tnode.glevel + 1
            dispatch({
                type: 'telBook/fetchAddTelBookGroup',
                payload: {
                    name: name,
                    glevel:level,
                    type:1,
                    superId:tnode.id
                }
            })
        }
    }

    delTelGroup = () =>{
        const { dispatch, tnode } = this.props
        dispatch({
            type: 'telBook/fetchDelTelBookGroup',
            payload: {
                id: tnode.id
            }
        })
    }

    upDateTelGroup = () =>{
        let name = this.state.telGroupName
        this.state.telGroupName = ''
        if(name!==''){
            const { dispatch, tnode } = this.props
            dispatch({
                type: 'telBook/fetchUpdateTelBookGroup',
                payload: {
                    name: name,
                    id: tnode.id
                }
            })
        }
    }


    setTelGroupName = (e)=>{
        this.setState({
            telGroupName: e.target.value
        })
    }

    menu = (
        <Menu>
          <Menu.Item key="1" onClick = {()=>{
                const {tnode, dispatch} = this.props
                dispatch({
                    type: 'telBook/setSelectedNode',
                    payload: {
                        id: tnode.id,
                        name: tnode.name
                        }
                })
              }}>查找此分组</Menu.Item>
          <Menu.Item key="2" onClick = {()=>{
                const {tnode, dispatch} = this.props
                dispatch({
                    type: 'telBook/setUpAddInfo',
                    payload: {
                        title: tnode.name+" 新增通讯录信息",
                        visible: true,
                        action: "telBook/fetchAddTelBook",
                        isUpdate: true,
                        groupId: tnode.id,
                        id: null,
                        name: null,
                        sex: null,
                        duties: null,
                        phone: null,
                        landTel: null,
                        cliqueTel: null
                        }
                })
              }}>添加通讯录</Menu.Item>
        </Menu>
    );

    render() {
        const {name,glevel,id} = this.props.tnode
        const {nameKey, dispatch} = this.props
        let selName = name
        if(nameKey && nameKey!==''){
            let index = name.indexOf(nameKey)
            if(index !== -1){
                let nlength = nameKey.length
                let before = name.substr(0,index)
                let after = name.substr(index+nlength)
                selName = (<span>{before}<span style={{ color: '#f50' }}>{nameKey}</span>{after}</span>) 
            }
        }

        return (
            <div>
                <Dropdown overlay={this.menu} trigger={['contextMenu']}>
                <span 
                    onDragEnter={()=>{
                        setSessionData("dragEnterId", id)
                    }}
                    onClick = {()=>{
                    ///////
                    }}>{selName}</span>
                </Dropdown>
                {glevel===4 ? null: <Divider type="vertical" />}
                {glevel===4 ? null: 
                    <Popconfirm 
                        icon={<Icon style={{ color: '#176B2C',marginTop:'5px' }} type="plus"/>} 
                        title={<Input 
                            placeholder="分组名"
                            onChange={this.setTelGroupName}/>}
                        onConfirm={this.addTelGroup}  
                        okText="Yes" 
                        cancelText="No">
                        <Tooltip title="新增子分组">
                            <Icon style={{ color: '#176B2C' }} type="plus"/>
                        </Tooltip>
                    </Popconfirm>
                }
                <Divider type="vertical" />
                <Popconfirm 
                    icon={<Icon style={{ color: '#108ee9',marginTop:'5px' }} type="edit"/>} 
                    title={<Input 
                                defaultValue = {name} 
                                placeholder="分组名"
                                onChange={this.setTelGroupName}/>}  
                    onConfirm={this.upDateTelGroup}  
                    okText="Yes" 
                    cancelText="No">
                    <Tooltip title="编辑分组">
                        <Icon style={{ color: '#108ee9' }} type="edit"/>
                    </Tooltip>
                </Popconfirm>
                <Divider type="vertical" />
                <Popconfirm 
                    icon={<Icon style={{ color: '#801919',marginTop:'-1px' }} type="delete"/>} 
                    title={"确定删除这个分组 ？"}  
                    onConfirm={this.delTelGroup}  
                    okText="Yes" 
                    cancelText="No">
                    <Tooltip title="删除分组">
                        <Icon style={{ color: '#801919' }} type="delete"/>
                    </Tooltip>
                </Popconfirm>
            </div>
        )
    }
}
